<template>
   <h1>可读可写的计算属性</h1>
  <h2>依赖姓:{{firstName}}</h2>
  <h2>依赖名:{{lastName}}</h2>
  <h2>name:{{name}}</h2>
  <button @click="changeName">修改</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
  import {ref , computed} from "vue"

  let firstName = ref("刘")
  let lastName = ref("二")

  let name = computed({
    get(){
      return firstName.value + lastName.value
    },
    set(val){
      console.log(val);
      firstName.value = val.split(" ")[0]
      lastName.value = val.split(" ")[1]
    }
  })

  const changeName = () => {
    name.value = "六 二"
  }

</script>